<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{margin: 0;padding: 0}
        /*CSS重置
            CSS重置是以浏览器内核根据自己定义的规则，按照自己制定的标准去解析页面的所有的元素。
            优点：由于不用的浏览器内核解析的标准不一致的，自己定义的CSS重置就可以避免浏览器不同，
                访问页面的效果不同
            缺点：浏览器解析HTML文档前，需要加载自定义的CSS重置，相对于来说，就需要消耗一部分时间
                还有一些特点的元素是CSS重置后，并不能完全实现统一展示效果的。
        */
        /*div{border-color: red;border-style: solid;border-width: 2px;}*/
        /*#div2{margin-top: 200px}*/
        /*#div1{margin-bottom: 100px}*/

        #div2{height:200px;background-color: red}
        #div1{height: 200px;background-color: aqua}
        #div3{border:1px solid red}
        #div3 *{border: 1px solid green}
        #div3 h1{
            /*height == line--height*/
            height: 140px;
            line-height: 140px;
            text-align: center;
            font: italic bold 40px "黑体";
        }
        #div4{border: 1px solid red;width: 200px;height: 100px;
            margin: 0 0 300px 0;
            /*内边距的调整会影响盒子模型的整体高度。撑开盒子，一般情况下，不建议使用内边距来调整内容*/
            padding: 100px 0 0 0 ;
        }
        #div5{width: 100px;height: 100px;background-color: blue;}
    </style>
</head>
<body>
<div id="div4">
    <div id="div5"></div>
</div>
<hr>
    <div class="div" id="div1"></div>
    <div class="div" id="div2"></div>
    <hr>
    <div id="div3">
        <h1>this is for you </h1>
        <p>this</p>
    </div>
</body>
</html>